<template>
  <div class="account-setting">
    <div class="account-padding">
      <div class="user-setting-top">
        <div class="account-avatar">
          <CropperAvatar v-model:dialogVisible="showCropperAvatar" @confirm="confirm" />
          <div class="container">
            <a-avatar :size="62" :src="getFile(userInfo.avatar)" @click="showCropperAvatar=true"
                      @mouseenter="handleMouseOver"
                      @mouseleave="handleMouseOut" />
            <CloudUploadOutlined class="upload-icon" v-show="showIcon" />
          </div>

          <div class="account-right">
            <span class="font-size-17 account-name">{{ userInfo.realname }}</span>
          </div>
        </div>
      </div>
      <div class="account-data">
        <!-- 详细资料 -->
        <div class="account-detail">
          <div class="font-size-15 font-bold font-color-gray" style="margin-bottom: 20px">详细资料
          </div>
          <div class="margin-bottom-15 font-size-13">
            <span class="gray-75 item-label">生日</span>
            <span class="gray-3">{{ userInfo.birthday || "未填写" }}</span>
          </div>
          <div class="margin-bottom-15 font-size-13">
            <span class="gray-75 item-label">性别</span>
            <span class="gray-3">{{ sexText }}</span>
          </div>
          <div class="font-size-13" style="margin-top: 10px">
            <a-button type="primary" size="small" @click="openFormModal">编辑</a-button>
          </div>
        </div>
        <!-- 联系信息 -->
        <div class="account-info">
          <div class="font-size-15 font-bold font-color-gray" style="margin-bottom: 20px">联系信息
          </div>
          <div class="margin-bottom-15 font-size-13">
            <span class="gray-75 item-label">邮箱</span>
            <span class="gray-3">{{ userInfo.email ? userInfo.email : "未填写" }}</span>
          </div>
          <div class="margin-bottom-15 font-size-13">
            <span class="gray-75 item-label">手机</span>
            <span class="gray-3">{{ userInfo.phone ? userInfo.phone : "未填写" }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <a-modal v-model:open="openForm" title="编辑资料" @ok="submitForm" okText="保存"
           cancelText="取消">
    <a-form ref="userFormRef" :model="userForm" :label-col="labelCol" :wrapperCol="wrapperCol"
            :rules="validatorRules">
      <a-form-item label="姓名" name="realname">
        <a-input v-model:value="userForm.realname" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item label="生日">
        <a-date-picker v-model:value="userForm.birthday" format="YYYY-MM-DD"
                       value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="性别">
        <JDictSelectTag v-model:value="userForm.sex" dictCode="sex" string-to-number />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watchEffect } from "vue";
import headerImg from "@/assets/img/header.jpg";
import { getFileAccessHttpUrl } from "@/utils/compUtils";
import { apiUserEdit } from "@/api/user";
import { useMessage } from "@/hooks/web/useMessage";
import { useWebStore } from "@/store";
import CropperAvatar from "@/components/public/CropperAvatar.vue";
import JDictSelectTag from "@/components/public/JDictSelectTag.vue";
import { CloudUploadOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const sexText = ref();
const userFormRef = ref();
const showIcon = ref<boolean>(false);
const openForm = ref<boolean>(false);
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 5 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 17 }
});
const { createMessage } = useMessage();
const validatorRules = {
  realname: [{ required: true, message: "请输入姓名", trigger: "blur" }]
};
const showCropperAvatar = ref<boolean>(false);
const webStore = useWebStore();
//用户信息
const userInfo = ref<any>({});
//头像动态计算
const avatar = computed(() => {
  return getFileAccessHttpUrl(userInfo.value.avatar) || headerImg;
});

const userForm = reactive({
  id: "",
  realname: "",
  birthday: "",
  sex: "",
  resume: ""
});

function openFormModal() {
  Object.assign(userForm, userInfo.value);
  openForm.value = true;
}

const confirm = (result) => {
  updateAvatar(result);
  showCropperAvatar.value = false;
};

function handleMouseOver() {
  showIcon.value = true;
}

function handleMouseOut() {
  showIcon.value = false;
}


/**
 * 更新用户头像
 */
function updateAvatar(data: string) {
  if (data) {
    updateUserInfo({ avatar: data, id: userInfo.value.id });
    userInfo.value.avatar = data;
    webStore.setUserInfo(userInfo.value);
  }
}

/**
 * 更新用户信息
 * @params 参数
 */
async function updateUserInfo(params) {
  await apiUserEdit(params);
}

/**
 * 更新用户信息
 * @params 参数
 */
async function submitForm() {
  await userFormRef.value.validate();
  userForm.id = userInfo.value.id;
  await updateUserInfo(userForm);
  createMessage.success("更新个人信息成功");
  userInfo.value.realname = userForm.realname;
  userInfo.value.birthday = userForm.birthday;
  userInfo.value.sex = userForm.sex;
  userInfo.value.resume = userForm.resume;
  webStore.setUserInfo(userInfo.value);
  openForm.value = false;
}

onMounted(async () => {
  userInfo.value = webStore.getUserInfo;
  if (Object.getOwnPropertyNames(userInfo.value).length == 0) {
    router.push("/login");
  }
});

watchEffect(() => {
  if (!userInfo.value.sex) {
    sexText.value = "未填写";
  }
  if (userInfo.value.sex == 1) {
    sexText.value = "男";
  } else if (userInfo.value.sex == 2) {
    sexText.value = "女";
  }
});
</script>

<style lang="less">
.account-setting {
  height: 90vh;

  .user-setting-top {
    padding-top: 40px;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    padding-bottom: 40px;
  }

  .account-avatar {
    align-items: center;
    display: flex;
    margin-right: 30px;
    flex: 1;
  }

  .change-avatar {
    img {
      display: block;
      margin-bottom: 15px;
      border-radius: 50%;
    }
  }

  .account-right {
    margin-left: 25px !important;
  }

  .font-size-15 {
    font-size: 15px;
  }

  .font-size-17 {
    font-size: 14px;
  }

  .pointer {
    cursor: pointer;
  }

  .account-name {
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    text-overflow: ellipsis;
    line-height: 32px !important;
  }

  .gray-bd {
    color: #bdbdbd;
  }

  .account-icon {
    margin-left: 4px;
  }

  .account-data {
    width: 100% !important;
    display: flex;
    min-width: 0;
  }

  .account-detail {
    width: 40%;
    display: flex;
    flex-direction: column;
    padding: 40px 0;

    .item-label {
      display: inline-block;
      text-align: left;
      width: 80px;
    }
  }

  .font-bold {
    font-weight: 700 !important;
  }

  .margin-bottom-15 {
    margin-bottom: 15px;
  }

  .account-info {
    width: 60%;
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    box-sizing: border-box;
    margin-left: 10px;

    .item-label {
      display: inline-block;
      text-align: left;
      width: 80px;
    }
  }

  .nowarp {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-padding {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .use-day {
    margin-top: 10px;
    font-size: 13px;

    span {
      color: #1e88e5;
      margin-left: 5px;
    }
  }

  .font-size-13 {
    font-size: 13px;
  }
}


.container {
  position: relative;
}

.upload-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 26px;
  transform: translate(-50%, -50%);
  color: white;

}

</style>
